/**
 * 安全评估证明材料收集系统页面
 */

import React, { useState } from 'react';
import { Shield, ArrowLeft, ArrowRight } from 'lucide-react';
import { ProofMapperProvider, useProofMapper } from '@/contexts/ProofMapper';
import { showMessage } from '@/components/common/MessageTip';

// 组件导入
import StepIndicator from '@/components/ProofMapper/StepIndicator';
import FileUpload from '@/components/ProofMapper/FileUpload';
import EvaluationTable from '@/components/ProofMapper/EvaluationTable';
import AIAssistant from '@/components/ProofMapper/AIAssistant';
import ExportPanel from '@/components/ProofMapper/ExportPanel';

// 主页面内容组件
const ProofMapperContent: React.FC = () => {
  const { 
    uploadedFiles, 
    evaluationItems 
  } = useProofMapper();
  const [currentStep, setCurrentStep] = useState(1);


  // 页面初始化不再引入本地mock数据。数据来源：
  // 1) 上传解析（parsePdf）
  // 2) 后端历史版本（loadSnapshot）
  // 3) 本地草稿（loadLatestVersion/applySnapshot）

  // 处理步骤切换
  const handleStepChange = (step: number) => {
    setCurrentStep(step);
  };

  // 处理下一步
  const handleNextStep = () => {
    if (currentStep < 3) {
      setCurrentStep(currentStep + 1);
    }
  };

  // 处理上一步
  const handlePrevStep = () => {
    if (currentStep > 1) {
      setCurrentStep(currentStep - 1);
    }
  };

  // 处理重新开始评估
  const handleRestartAssessment = () => {
    setCurrentStep(1);
    showMessage('info', '重新开始评估');
  };

  // 根据当前步骤渲染内容
  const renderStepContent = () => {
    switch (currentStep) {
      case 1:
        // 第一步：增加选择历史版本能力；选择后跳到第二步
        return <FileUpload onUseVersion={() => setCurrentStep(2)} />;
      case 2:
        return (
          <div className="space-y-6">
            <EvaluationTable />
            <AIAssistant />
          </div>
        );
      case 3:
        return <ExportPanel />;
      default:
        return <FileUpload />;
    }
  };

  // 检查步骤是否可以进行下一步
  const canProceedToNext = () => {
    switch (currentStep) {
      case 1:
        return uploadedFiles.some(file => file.status === 'completed');
      case 2:
        return evaluationItems.length > 0;
      case 3:
        return false; // 最后一步
      default:
        return false;
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-background dark:to-background">
      {/* 页面头部 */}
      <div className="bg-white/80 dark:bg-card backdrop-blur-sm border-b border-border px-6 py-6">
        <div className="max-w-7xl mx-auto">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="flex items-center justify-center w-12 h-12 bg-primary/10 rounded-lg">
                <Shield className="h-6 w-6 text-primary" />
              </div>
              <div>
                <h1 className="text-2xl font-bold text-foreground">安全评估证明材料收集系统</h1>
                <p className="text-sm text-muted-foreground mt-1">
                  智能化安全评估材料需求分析与清单生成
                </p>
              </div>
            </div>
            
            {/* 重新开始按钮 - 仅在步骤一之后显示 */}
            {currentStep > 1 && (
              <button
                onClick={handleRestartAssessment}
                className="inline-flex items-center gap-2 px-4 py-2 text-sm text-primary hover:bg-primary/10 rounded-md transition-colors"
              >
                重新开始评估
              </button>
            )}
          </div>
        </div>
      </div>

      {/* 主要内容区域 */}
      <div className="max-w-7xl mx-auto px-6 py-8">
        <div className="space-y-8">
          {/* 步骤指示器 */}
          <StepIndicator
            currentStep={currentStep}
            onStepClick={handleStepChange}
          />

          {/* 步骤内容 */}
          <div className="min-h-[600px]">
            {renderStepContent()}
          </div>

          {/* 导航按钮 */}
          <div className="flex items-center justify-between">
            {currentStep > 1 && (
              <button
                onClick={handlePrevStep}
                className="inline-flex items-center gap-2 px-6 py-3 text-sm text-muted-foreground hover:text-foreground transition-colors"
              >
                <ArrowLeft className="h-4 w-4" />
                返回上步
              </button>
            )}

            <div className={`flex items-center gap-4 ${currentStep === 1 ? 'ml-auto' : ''}`}>
              {currentStep < 3 && (
                <button
                  onClick={handleNextStep}
                  disabled={!canProceedToNext()}
                  className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  下一步：
                  {currentStep === 1 && 'AI解析调整'}
                  {currentStep === 2 && '导出文档'}
                  <ArrowRight className="h-4 w-4" />
                </button>
              )}
            </div>
          </div>
        </div>
      </div>

    </div>
  );
};

// 主页面组件（带Provider）
const ProofMapperPage: React.FC = () => {
  return (
    <ProofMapperProvider>
      <ProofMapperContent />
    </ProofMapperProvider>
  );
};

export default ProofMapperPage;
